<template>
  <div>
    <div class="control-section"
         :style="{height: gadgetHeight + 'px'}">
      <div class="content-wrapper control-styles"
           v-loading="loading"
           style="width:95%;">
        <ejs-multiselect ref="multiselect"
                         v-model="value"
                         :dataSource='datesource'
                         :mode='gadgetSetting.Mode'
                         @dataBound="dataBound"
                         :popHeight="gadgetSetting.popHeight"
                         :filterPlaceholder="gadgetSetting.filterPlaceholder"
                         :showSelectAll="gadgetSetting.showSelectAll"
                         :enableSelectionOrder="gadgetSetting.enableSelectionOrder"
                         :placeholder='gadgetSetting.placeholder'
                         :fields="gadgetSetting.fields"
                         :allowFiltering="gadgetSetting.allowFiltering"
                         @filtering="filtering"
                         @change="onchange"></ejs-multiselect>
        <br>
      </div>
      <model :showSetting="queryModelDefaultSetting.showSetting"
             @queryModelClosed="queryModelClosed"
             :dataInfo="queryModelDefaultSetting.dataInfo"
             :updateGadget="upgradeGadgetSetting" />
    </div>
  </div>
</template>

<script>

import mixinGadgetViewModule from '@/mixins/gadget-view-module'
// import model from '@/components/gadget/query-model/query-model.vue'
import { getUrlQureyParams } from '@/utils/common'

export default ({
  mixins: [mixinGadgetViewModule],
  components: { model: () => import('@/components/gadget/query-model/query-model') },
  data: function () {
    return {
      datesource: {
        value: '100',
        text: '100'
      },
      gadgetSetting: {},
      value: null,
      gadgetStatus: 'init',
      loading: false,
      queryModelDefaultSetting: {
        showSetting: false,
        dataInfo: {
          businessId: this.pageId,
          gadgetId: this.id,
          gadgetType: 'customizedusermultipledropdownlistgadget',
          gadgetSettingExclude: ['DATA'],
          gadgetSetting: {
            placeholder: 'Select',
            Mode: 'CheckBox', // 'Box',// 'Delimiter',
            popHeight: '350px',
            filterPlaceholder: 'Search Users',
            showSelectAll: true,
            showDropDownIcon: true,
            enableSelectionOrder: true,
            allowFiltering: true,
            fields: { text: 'realName', value: 'id' },
            height: '220px',
            queryParams: 'user_id'
          }
        }
      }

    }
  },

  beforeCreate () {
    // this.$options.components.model = () => import('@/components/gadget/query-model/query-model')
  },
  created () {
    this.query()
    this.$store.state.isWidget = false
  },
  methods: {
    upgradeGadgetSetting (setting) {
      // this.gadgetSetting = { ...this.queryModelDefaultSetting.dataInfo.gadgetSetting, ...setting.gadgetSetting }
      // this._.merge(this.queryModelDefaultSetting.dataInfo.gadgetSetting, setting.gadgetSetting)
    },
    queryModelClosed () {
      this.queryModelDefaultSetting.showSetting = false
      this.query()
    },
    showQueryModel () {
      this.queryModelDefaultSetting.showSetting = true
    },
    dataBound (e) {
      let valueFromQuery = getUrlQureyParams(this.gadgetSetting.queryParams)
      if (!valueFromQuery) {
        this.$refs.multiselect.selectAll(true)
      } else {
        this.$refs.multiselect.selectAll(false)
      }
    },
    query () {
      this.loading = true
      this._.merge(this.gadgetSetting, this.queryModelDefaultSetting.dataInfo.gadgetSetting)
      let _self = this
      _self.value = null
      const param = {
        code: this.code,
        gadgettype: this.wgadgettype,
        widgetName: this.wName,
        status: 1
      }
      _self.$interface.schedule.getWorkScheduledUserListApi(param)
        .then(({ data: res }) => {
          this.loading = false
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          _self.datesource = res.data
          _self.afterQuery()
        }).catch(() => {
          _self.loading = false
        })
    },
    afterQuery () {
      let valueFromQuery = getUrlQureyParams(this.gadgetSetting.queryParams)
      if (valueFromQuery) {
        this.value = valueFromQuery.split(',')
      } else {
        // get all value
        this.value = this._.map(this.datesource, this.gadgetSetting.fields.value)
        valueFromQuery = this.value
      }
      this.getDataListParams(valueFromQuery)
    },
    selectedAll (e) {

    },
    filtering (e) {
      this.$nextTick(() => {
        this.$refs.multiselect.ej2Instances.selectAll(false)
      }, 2000)
    },
    onchange (e) {
      if (e.value && e.value.length > 0) {
        this.getDataListParams(e.value)
      }
    },
    getDataListParams (val) {
      let _self = this
      let newslicer = {}
      if (val && val.length > 0) {
        if (_self.slicer[_self.gadgetSetting.queryParams]) {
          delete _self.slicer[_self.gadgetSetting.queryParams]
        }
        newslicer[_self.gadgetSetting.queryParams] = val && val.join()
        _self._.merge(_self.slicer, newslicer)
        localStorage.setItem(this.pageId + '-user-multi-select-gadget-' + _self.gadgetSetting.queryParams, JSON.stringify(val))
      } else {
        delete _self._.merge(_self.slicer, newslicer)
        localStorage.removeItem(this.pageId + '-user-multi-select-gadget' + _self.gadgetSetting.queryParams)
        this.$message.error(this.gadgetSetting.watermark)
      }
      this.updateGadgetStatus('ready')
    }
  }
})
</script>
<style scoped>
.el-card ::v-deep .el-card__body {
  padding: 5px 5px !important;
}
.el-card ::v-deep .el-divider--horizontal {
  margin: 3px 0 !important;
}
.control-styles {
  margin: 0 auto;
  width: 300px;
}
</style>
